<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 插槽</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <component1 v-bind:num="number" v-slot:slot1>slot1</component1>
    <component1 v-bind:num="number" #slot2>slot2</component1>
    <component1 v-bind:num="number"></component1>
    <component1 v-bind:num="number"></component1>
</div>

<template id="component1">
    <div>
        <div>{{num}}</div>
        <slot>默认值</slot>
        <slot name="slot1"></slot>
        <slot name="slot2"></slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const demo = new Vue({
        el: '#app',
        data: {
            number : 10000,
        },
        components: {
            'component1' : {
                template : '#component1',
                props:['num'],
            }
        },
    });
</script>
</body>
</html>